<template>
  <div>
    <!-- :load="loadNode" 自动执行函数 --异步请求数据 -->
    <!-- lazy	是否懒加载子节点，需与 load 方法结合使用 --> 
    <!-- accordion	是否每次只打开一个同级树节点展开  -->
    <!-- node-click	节点被点击时的回调	共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 -->
    <el-tree :props="props" :load="loadNode" lazy accordion @node-click="nodeClick"></el-tree> 
  </div>
</template>

<script>
export default {
 data() {
      return {
        props: {
          label: 'name',
          children: 'zones',
          isLeaf: 'leaf'
        },
      };
    },
    methods: {
      //点击获取tree列表
      loadNode(node, resolve) {
        if (node.level === 0) {
            //进去页面，获取第一层tree的数据
            this.$api.getSelectCategory()
            .then(res=>{
              // console.log(res.data);
              if(res.data.status === 200){
                  return resolve(res.data.result);
              }          
            })
        }
        if (node.level >= 1){
            //请求当前的点击的tree数据
            //进去页面，获取第二层tree的数据
            this.$api.getSelectCategory(
              {id:node.data.cid}
            )
            .then(res=>{
              // console.log('二级路由与三级路由',res.data);
              if(res.data.status === 200){
                  return resolve(res.data.result);
              }else{
                return resolve([]);
              }         
            })
        }
      },
      //点击tree获取数据
      nodeClick(data,node){
        // console.log(data,node);
        // 传递数据给父亲
        this.$emit('sendTreeData',data);
      }
}
}
</script>

<style>

</style>